<template>
  <ElDialog
    v-model="visible"
    title="操作库存"
    width="600px"
    top="4vh"
    :close-on-click-modal="false"
    @open="handleOpen"
    @close="handleClose"
  >
    <ElForm ref="formRef" :model="form" :rules="rules" label-width="120px" label-position="right">
      <ElRow :gutter="20">
        <ElCol :span="24">
          <ElFormItem label="操作类型" prop="serveFlag">
            <ElRadioGroup v-model="form.type">
              <ElRadio :value="1">入库</ElRadio>
              <ElRadio :value="2">出库</ElRadio>
            </ElRadioGroup>
          </ElFormItem>
        </ElCol>
        <ElCol :span="24">
          <ElFormItem :label="`${form.type === 1 ? '入库' : '出库'}数量`" prop="num">
            <ElInputNumber
              v-model="form.num"
              :min="1"
              :max="99999"
              :placeholder="`请输入${form.type === 1 ? '入库' : '出库'}数量`"
              style="width: 100%"
            />
          </ElFormItem>
        </ElCol>
      </ElRow>
    </ElForm>

    <template #footer>
      <div class="dialog-footer">
        <ElButton @click="handleClose">取消</ElButton>
        <ElButton type="primary" :loading="loading" @click="handleSubmit"> 确定 </ElButton>
      </div>
    </template>
  </ElDialog>
</template>

<script setup lang="ts">
  import { ref, reactive, computed, nextTick } from 'vue'
  import { ElMessage } from 'element-plus'
  import type { FormInstance, FormRules } from 'element-plus'
  import { scoGoodsUpdateStockUsingPost } from '@/api/scOjifenshangpin'
  // 类型定义
  interface Props {
    modelValue: boolean
    actData?: any | null
  }

  interface Emits {
    (e: 'update:modelValue', value: boolean): void
    (e: 'success'): void
  }

  // Props 和 Emits
  const props = withDefaults(defineProps<Props>(), {
    modelValue: false,
    actData: undefined
  })

  const emit = defineEmits<Emits>()

  // 响应式数据
  const formRef = ref<FormInstance>()

  const loading = ref(false)

  const form = reactive({
    type: 1,
    num: 1
  })

  const visible = computed({
    get: () => props.modelValue,
    set: (value) => emit('update:modelValue', value)
  })

  // 表单验证规则
  const rules: FormRules = {
    num: [{ required: true, message: '请输入数量', trigger: 'blur' }]
  }

  const handleSubmit = async () => {
    if (!formRef.value) return
    try {
      await formRef.value.validate()
      if (loading.value) return
      loading.value = true
      let data = {
        id: props.actData?.id,
        scoreStockNum: form.num
      }
      if (form.type === 2) {
        data.scoreStockNum = -Math.abs(form.num)
      }
      await scoGoodsUpdateStockUsingPost({
        body: data
      })
      formRef.value?.resetFields()
      ElMessage.success('操作成功')
      emit('success')
    } catch (error: any) {
      console.log(error)
      ElMessage.error('操作失败')
    } finally {
      loading.value = false
    }
  }

  const handleOpen = () => {
    form.type = 1
    form.num = 1
    formRef.value?.resetFields()
  }

  const handleClose = () => {
    formRef.value?.resetFields()
    nextTick(() => {
      visible.value = false
    })
  }
</script>

<style lang="scss" scoped>
  :deep(.service-item) {
    .el-form-item__content {
      .el-form-item__error {
        margin-top: -12px;
        margin-left: 46px;
      }
    }
  }

  .dialog-footer {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
  }
</style>
